<template>
  <div>
    <header class="header">
      <el-button @click="$router.push('/teacher/dashboard')" icon="left" type="text" class="back-button">
        <img src="@/assets/svgs/left.svg" alt="Back" />
      </el-button>
      <span class="title">课堂总结</span>
      <div class="header-right">
        <el-button 
          @click="openDialog" 
          type="text" 
          class="record-button"
        >添加总结</el-button>
      </div>
    </header>
    <div class="record-card-list">
      <div v-for="record in records" :key="record.id" class="record-card">
        <div class="record-title">{{ record.title }}</div>
        <div class="record-keywords">
          <span v-for="keyword in record.keywords" :key="keyword" class="keyword">{{ keyword }}</span>
        </div>
        <div class="record-summary">{{ record.summary }}</div>
        <div class="record-dates">{{ formatDate(record.publishTime) }}</div>
      </div>
    </div>

    <!-- 上传音视频文件对话框 -->
    <el-dialog title="上传音视频文件" v-model="dialogVisible" width="600px" append-to-body>
      <hr class="dialog-divider" />
      <div class="dialog-content" style="margin-bottom: 30px;"> <!-- 增加与上传按钮的垂直距离 -->
        <el-button type="primary" class="upload-button">上传</el-button>
      </div>
      <div class="dialog-info" style="margin-top: 30px; text-align: left;">单个文件最长六小时</div> <!-- 增加与上传按钮的垂直距离 -->
      <div class="dialog-info" style="text-align: left;">视频支持：mp4/wmv/m4v/flv/rmvb/dat/mov/mkv/webm/avi/mpeg/3gp/ogg，单个最大 6G</div>
      <div class="dialog-info" style="text-align: left;">音频支持：mp3/wav/m4a/wma/aac/ogg/amr/flac/aiff，单个最大 500M</div>
      <div class="dialog-actions" style="margin-top: 40px;"> <!-- 增加与上面文字部分的垂直距离 -->
        <el-button @click="dialogVisible = false" class="cancel-button" style="border-color: #13227a;">取消</el-button>
        <el-button type="primary" class="transcribe-button" style="border-color: #13227a;">开始转写</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { ref } from 'vue';

const route = useRoute();
const recordId = route.params.id; // 获取反馈 ID
const dialogVisible = ref(false);

function formatDate(date) {
  const options = { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false };
  return new Intl.DateTimeFormat('zh-CN', options).format(date);
}

function openDialog() {
  dialogVisible.value = true; // 打开对话框
}

function addRecord() {
  const newRecord = {
    id: records.length + 1,
    publishTime: new Date(),
    keywords: ['关键词1', '关键词2'], // 示例关键词
    summary: '课程内容的总结浓缩', // 示例总结
    submittedCount: 0,
    totalCount: 30
  };
  records.push(newRecord);
}


</script>

<script>
export default {
  data() {
    return {
      records: [
        // 示例数据
        {
          id: 1,
          title: '课程标题',
          publishTime: new Date(),
          keywords: ['关键词1', '关键词2'],
          summary: '课程内容的总结浓缩',
          submittedCount: 5,
          totalCount: 30
        },
        // 可以添加更多记录
      ]
    };
  }
};
</script>

<style scoped>
.template {
  background-color: #F9FAFB;
}
.header {
  color: white;
  padding: 10px;
  display: flex;
  align-items: center;
  background-color: #13227a;
  justify-content: space-between; /* 使内容两端对齐 */
}

.back-button {
  color: white;
  border: none;
  width: 25px;
  height: 25px;
}

.title {
  margin-left: 10px; /* 添加左边距 */
}

.header-right {
  display: flex; /* 使右侧内容为flex布局 */
}

.record-button {  
  background-color: #13227a;
  border: 1px solid white;
  color: white;
  width: 120px;
  height: 40px;
}

.record-card-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  padding: 0 40px;
}

.record-card {
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  height: 220px; /* 调整每个卡片的大小 */
  width: calc(30% - 15px); /* 调整为一行三张卡片 */
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.record-title {
  font-weight: bold;
  color: black;
  font-size: 20px;
}

.record-keywords {
  margin-top: 10px;
}

.keyword {
  color: #13227a;
  background-color: rgba(19, 34, 122, 0.1);
  border-radius: 5px;
  padding: 5px;
  margin-right: 5px;
  display: inline-block;
}

.record-summary {
  margin-top: 10px;
  color: darkgray;
}

.record-dates {
  color: gray;
  font-size: 14px;
  margin-top: auto; /* 使时间在卡片右下角 */
}

.dialog-divider {
  border: 1px solid lightgray;
}

.dialog-content {
  text-align: center;
}

.upload-button {
  background-color: #13227a; 
  color: white;
  border-color: #13227a; /* 添加边框颜色 */
}

.upload-button:active {
  background-color: #13227a; /* active状态颜色 */
  opacity: 0.8;
}

.dialog-info {
  margin-top: 10px;
  text-align: left;
}

.dialog-actions {
  margin-top: 20px;
  text-align: right;
}

.cancel-button {
  color: #13227a; 
  border-color: #13227a;
}

.cancel-button:active {
  background-color: #13227a; /* active状态颜色 */
  opacity: 0.8;
}

.transcribe-button {
  background-color: #13227a; 
  color: white;
  border-color: #13227a;
}

.transcribe-button:active {
  background-color: #13227a; /* active状态颜色 */
  opacity: 0.8;
}
</style>